<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抛物线</title>
</head>
<style>
        *{margin: 0;padding: 0}  /*简单的浏览器兼容*/
    /*设置初始样式*/
    .item {
        width:20px;
        height: 20px;
        display: inline-block;
        position: absolute;
        top: 50px;
        left: 20px;
        background-color: #00aa00;
        border-radius: 50%;
    }
    /*竖直运动*/
    .wraper {
        animation: vertical-animation 2s  .5s 1;
        animation-timing-function: cubic-bezier(.11,-.33,.55,.11);
    }
    /*水平运动*/
    .wraper .item {
        animation: hor-animation 2s linear .5s 1;
    }
    @keyframes hor-animation {
        0% { transform: translateX(0px);opacity: 1; }
        100% { transform: translateX(400px);opacity: 0; }
    }
    @keyframes vertical-animation {
        0% { transform: translateY(0px);opacity: 1;   }
        100% { transform: translateY(400px);opacity: 0; }
    }
    /* @-moz-keyframes hor-animation {
        0% { transform: translateX(0px); }
        100% { transform: translateX(400px); }
    }
    @-webkit-keyframes hor-animation {
        0% { transform: translateX(0px);     }
        100% { transform: translateX(400px); }
    }
    @-moz-keyframes vertical-animation {
        0% { transform: translateY(0px);  }
        100% { transform: translateY(400px); }
    }
    @-webkit-keyframes vertical-animation {
        0% { transform: translateY(0px);     }
        100% { transform: translateY(400px); }
    } */
</style>
<body>
    <div class="wraper">         <!--控制竖直运动-->
        <div class="item"></div> <!--控制水平运动-->
    </div>
    <!-- <div class="item2"></div> -->
</body>
</html>